<template>
    <view class="order-box">
        <div class="order" v-for="item in list" :key="item">
            <div class="order-head flex-a flex-b">
                <text class="title">我的订单</text>
                <div class="all flex-a">
                    <span class="flex-link-font" @click="jumpTo('/packageA/pages/serOrderList/index')">查看所有的订单</span>
                    <Right color="#aaaaaa" size="10" />
                </div>
            </div>
            <div class="order-list">
                <nut-grid :column-num="4" :border="false">
                    <nut-grid-item text="待接单" @click="jumpTo('/packageA/pages/serOrderList/index?tab=1')">
                        <image style="width:30px;height: 30px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/09/29/104841.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="待服务" @click="jumpTo('/packageA/pages/serOrderList/index?tab=3')">
                        <image style="width:30px;height: 30px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/09/29/104859.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="服务中" @click="jumpTo('/packageA/pages/serOrderList/index?tab=4')">
                        <image style="width:30px;height: 30px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/09/29/104811.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="已完成" @click="jumpTo('/packageA/pages/serOrderList/index?tab=5')">
                        <image style="width:30px;height: 30px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/09/29/104750.png">
                        </image>
                    </nut-grid-item>
                    <!-- <nut-grid-item text="待评价" @click="jumpTo('/packageA/pages/serOrderList/index?tab=5')">
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/05/172254.png">
                        </image>
                    </nut-grid-item> -->
                </nut-grid>
            </div>
        </div>
        <div class="service-box">
            <nut-cell-group>
                <nut-cell :center="true" title="服务状态">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/09/29/110203.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <nut-switch v-model="serviceStatus" @change="changeStatus" active-text="开" inactive-text="关"
                            active-color="#F0A93F" />
                    </template>
                </nut-cell>
            </nut-cell-group>
            <nut-cell-group>
                <nut-cell :center="true" title="入驻信息" is-link @click="jumpTo('/packageA/pages/manage/settleIn')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/09/29/110203_1.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <Right color="#aaaaaa" size="10" />
                    </template>
                </nut-cell>
            </nut-cell-group>
        </div>
        <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
    </view>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro'
import { reactive, toRefs, onMounted } from 'vue';
import mitt from "../../../utils/mitt";
import { Right } from '@nutui/icons-vue-taro';
import { Cell, CellGroup } from '@nutui/nutui';
import { updateUserOnServer } from '../../../../api/index'
export default {
    components: {
        'nut-cell': Cell,
        'nut-cell-group': CellGroup,
        Right
    },
    setup() {
        const state = reactive({
            address: '',
            list: [
                {
                    shop_number: 0
                }
            ],
            msg: '',
            show: false,
            type: 'text',
            cover: false,
            serviceStatus: true,
            user: {}
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data ? res.data : {}
                }
            })
            mitt.on("user_on_server", (val) => {
                console.log(val)
                state.serviceStatus = val == 1 ? true : false
            })
        })
        const chooseLocation = () => {
            Taro.chooseLocation({
                success: function (res) {
                    console.log(res)
                    state.address = res.address
                    const latitude = res.latitude
                    const longitude = res.longitude
                },
                fail: function (res) {
                    console.log(res, '获取地址失败');
                },
            })
        }
        const changeStatus = (val) => {
            updateUserOnServer({ User_ID: state.user.uuid, type: val == true ? 1 : 0 }).then(res => {
                if (res.code == 0) {
                    if (state.serviceStatus) {
                        Taro.showToast({
                            title: '接单已开启',
                            icon: 'success',
                            duration: 2000
                        })
                    } else {
                        Taro.showToast({
                            title: '接单已关闭',
                            icon: 'error',
                            duration: 2000
                        })
                    }

                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const showToast = (msg) => {
            state.msg = msg
            state.show = true
        }
        const loginOut = () => {
            Taro.showModal({
                title: '提示',
                content: '是否确认退出登录？',
                success: function (res) {
                    if (res.confirm) {
                        Taro.clearStorage()
                        mitt.emit("hasLogin", false)
                    }
                }
            })
        }
        const callPhone = () => {
            Taro.makePhoneCall({
                phoneNumber: '110' //仅为示例，并非真实的电话号码
            })
        }
        return {
            ...toRefs(state), jumpTo, showToast, loginOut, callPhone, chooseLocation, changeStatus
        };
    }
};
</script>

<style lang="scss">
.nut-row {
    overflow: hidden;

}


.flex-content {
    margin: 5% auto 0;
    width: 90%;
    align-items: center;
    background-color: white;

    .nut-switch-base {
        min-width: 82rpx;
    }
}

.flex-link-font {
    font-size: 24rpx;
    color: #B1B1B1;
    margin-right: 10rpx;
}

.order-list {
    .nut-grid-item__text {
        color: #575757;
        font-size: 22rpx;
    }
}

.service-box {
    background: #fff;
    width: 94%;
    margin: 20rpx auto 0;
    border-radius: 10rpx;

    .nut-cell__title {
        color: #444C66;
        font-size: 26rpx;
    }
}

.order-box {
    padding-top: 15rpx;
    box-sizing: border-box;
    background: #F4F4F4;
    border-radius: 20px 20px 0 0;

    .order {
        width: 94%;
        margin: 0 auto;
        background: #fff;
        border-radius: 10rpx;

        .order-head {
            padding: 20rpx 0;
            width: 94%;
            margin: 0 auto;
            box-sizing: border-box;
            border-bottom: 1rpx solid #F7F7F7;

            .title {
                font-size: 28rpx;
                font-weight: bold;
                color: #3E3E3E;
            }

            .all {
                span {
                    font-size: 22rpx;
                    color: #A8A8A8;
                }
            }
        }
    }
}
</style>